<template>
  <ul class="total">
    <div class="title">单位建筑信息统计</div>
    <template v-if="totalLength>0">
      <div class="builGrouph">
        <li v-for="(item, index) in getProperty" :key="index" class="box">
          <div class="list-bottom">
            <img :src="item.imgurl" style="width: 27px; height: 26px" />
            <span class="buildNum">{{ item.num }}</span>
            <div>
              <span class="buildNam">{{ item.name }}</span>
            </div>
          </div>
        </li>
      </div>
      <div class="boxGrouph">
        <li v-for="(item, index) in getBuild" :key="index" class="boxCheck"
          >
          <div class="list-bottom">
            <img :src="item.imgurl" style="width: 27px; height: 26px" />
            <span class="boxNum">{{ item.num }}</span>
            <div>
              <span class="boxNam">{{ item.name }}</span>
            </div>
          </div>
        </li>
      </div>
    </template>
    <template v-else>
      <img src="./images/checkZw.png" alt="" style="width:161px; height:111px;margin: 20px 180px">
    </template>
  </ul>
</template>
<script lang="ts">
interface HttpResponse {
  status: number
  statusText: string
  data: {
    code: number
    desc: string
    [key: string]: any
  }
}
import { ref, defineComponent } from "vue"
import wuyePng from "./images/wuye.png"
import jianzhuPng from "./images/jianzhu.png"
import shebeiPng from "./images/shebei.png"
import ruzhuPng from "./images/ruzhu.png"
import mianjiPng from "./images/mianji.png"
import { getTotal } from "../../api/moniter-center";//暂时使用，跳过ts检测
export default defineComponent({
  name: "Total",
  setup:()=> {
  },
  data(){
    return {
      userInfo:localStorage.getItem('qwt-wy-userInfo'),
      totalLength:0,
      getProperty: [
        {
          name: "建筑总数 (栋)",
          num: NaN,
          imgurl: jianzhuPng
        },
        {
          name: "设备总数",
          num: NaN,
          imgurl: ruzhuPng,
        },
      ],
      getBuild: [
        {
          name: "入驻单位总数",
          num: NaN,
          imgurl: ruzhuPng,
        },
        {
          name: "建筑总面积 (m²)",
          num: NaN,
          imgurl: mianjiPng,
        },
      ],
    }
  },
  methods:{
    async getTotal() {
      const res = await getTotal();
      if (res.info === "success") {
        let newObj = { ...res.data };
        this.totalLength = Object.keys(newObj).length 
        this.getProperty[0].num = newObj.archTotal;
        this.getProperty[1].num = newObj.devicTotal;
        this.getBuild[0].num = newObj.joinUnitTotal;
        this.getBuild[1].num = newObj.areaTotal;
      }
    },
  },
  mounted(){
    this.getTotal()
  }
})
</script>
<style scoped lang="scss">
.total {
  width: 100%;
  height: 100%;
  background: url(./images/1.png) no-repeat;
  background-size: 100% 100%;
  .title {
    text-align: left;
    height: 5.2vh;
    line-height: 5vh;
    margin-left: 16px;
    font-size: 16px;
    font-weight: 400;
    color: #409eff;
  }
  .builGrouph {
    display: flex;
    flex-direction: row;
    margin-top: 20px;
    .list-bottom {
      margin-left: 50px;
      margin-left: 90px;
    }
    .buildNum {
      font-size: 30px;
      font-weight: bold;
      margin-left: 7px;
      background: linear-gradient(0deg, #409eff 0%, #1ad1ff 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .buildNam {
      color: #fefeff;
      opacity: 0.4;
      font-size: 14px;
    }
  }
  .boxGrouph {
    margin-top: 20px;
    display: flex;
    flex-direction: row;    
    margin-top: 20px;
    .list-bottom {
      margin-left: 50px;
      margin-left: 90px;
    }
    .boxNum {
      font-size: 30px;
      font-weight: bold;
      margin-left: 7px;
      background: linear-gradient(0deg, #409eff 0%, #1ad1ff 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .boxNam {
      color: #fefeff;
      font-size: 14px;
      opacity: 0.4;
    }
  }
}
</style>